<template>
    <section class="featured section-padding">
        <div class="container">
            <h1 class="section-title">最新 分享</h1>
            <div class="row">
                <div>
                    <el-scrollbar>
                        <div class="scrollbar-flex-content">
                            <p class="scrollbar-demo-item">
                                <el-tag @click="changSelectTag({ isCrack: true }, 'isCrack')"
                                    :class="{ activeTag: selectTag.some(x => 'isCrack' in x) }" style="cursor: pointer;"
                                    type="info" effect="plain">破解</el-tag>
                            </p>
                            <p class="scrollbar-demo-item">
                                <el-tag @click="changSelectTag({ isPay: true }, 'isPay')"
                                    :class="{ activeTag: selectTag.some(x => 'isPay' in x) }" style="cursor: pointer;"
                                    type="info" effect="plain">免费</el-tag>
                            </p>
                            <p class="scrollbar-demo-item">
                                <el-tag @click="changSelectTag({ type: 1 }, 'type')"
                                    :class="{ activeTag: selectTag.some(x => 1 == x.type) }" style="cursor: pointer;"
                                    type="info" effect="plain">游戏</el-tag>
                            </p>
                            <p class="scrollbar-demo-item">
                                <el-tag @click="changSelectTag({ type: 2 }, 'type')"
                                    :class="{ activeTag: selectTag.some(x => 2 == x.type) }" style="cursor: pointer;"
                                    type="info" effect="plain">软件</el-tag>
                            </p>
                        </div>
                    </el-scrollbar>
                </div>
            </div>
            <div class="row">
                <div v-for="(soft, index) in softList" :key="index" class="col-xs-6 col-sm-6 col-md-6 col-lg-4">
                    <div class="featured-box">
                        <!-- <figure>
                            <div class="icon">
                                <i class="lni-heart"></i>
                            </div>
                            <a href="#"><img class="img-fluid" src="../assets/img/featured/img-12.jpg" alt=""></a>
                        </figure> -->
                        <div class="feature-content">
                            <!-- <div class="tg-product">
                                <a href="#">Furnitures > Office</a>
                            </div> -->
                            <h4><a style="font-size: 14px;">{{ soft.name }}</a></h4>
                            <div class="descsBox">
                                <el-tooltip class="item" effect="dark" :content="soft.descs" placement="top">
                                    <span>{{ soft.descs }}</span>
                                </el-tooltip>
                            </div>
                            <ul class="address">
                                <li>
                                    <a><i class="lni-layers"></i> {{ soft.type == 1 ? '游戏' : '软件' }}</a>
                                </li>
                                <li>
                                    <a><i class="lni-alarm-clock"></i> {{ formatDate(soft.createTime) }}</a>
                                </li>
                                <li>
                                    <a v-show="soft.isHot"><i class="lni-emoji-smile"></i> 推荐</a>
                                </li>
                                <li>
                                    <a v-show="soft.isCrack"><i class="lni-package"></i> 破解版</a>
                                </li>
                            </ul>
                            <div class="btn-list d-flex justify-content-between">
                                <!-- <a v-show="!soft.isPay" class="btn-price" href="#">$ {{ soft.newPrice }}</a> -->
                                <RouterLink :to="{path:'/index/detail',query:{code:soft.code,id:soft.id}}">
                                    <a class="btn btn-common" href="ads-details.html">
                                        <i class="lni-list"></i>
                                        详情
                                    </a>
                                </RouterLink>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pagination-bar d-flex justify-content-center">
                <nav>
                    <ul class="pagination">
                        <li v-show="total" class="page-item"><a class="page-link">共{{ page }}/{{ resultPage.pages }}页</a>
                        </li>
                        <li v-show="resultPage.isPre" class="page-item"><a class="page-link" @click="goPage(page - 1)"
                                href="javascript:void(0)">Pre</a></li>
                        <li v-for="p in resultPage.pageNoList" class="page-item">
                            <a class="page-link " :class="{ active: page == p }" @click="goPage(p)"
                                href="javascript:void(0)">{{ p }}</a>
                        </li>
                        <li v-show="resultPage.isNext" class="page-item"><a class="page-link" @click="goPage(page + 1)"
                                href="javascript:void(0)">Next</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </section>
</template>

<script>
import { ref } from "vue"
import { RouterLink } from "vue-router"
import dayjs from 'dayjs'
export default {
    data() {
        return {
            selectTag: [],
            search: { name: "" },
            page: 1,
            size: 12,
            total: 0,
            softList: [],
            resultPage: {},
            obj:{}
        }
    },
    created() {
        this.getLocationSearch('searchKey')
        this.loadData()
    },
    methods: {
        changSelectTag(tag, item) {
            if (this.selectTag.some(x => item in x)) {
                this.selectTag = this.selectTag.filter(x => !(item in x))
            } else {
                this.selectTag.push(tag)
            }
        },
        goPage(p) {
            this.page = p
            this.loadData()
        },
        loadData() {
            let search = this.search
            search.isShow = true
            search.orderHot = true
            this.$axios.post(`/home/softpage/${this.page}/${this.size}`, search).then(({ data }) => {
                if (data.code == 0) {
                    this.softList = data.rows
                    this.total = data.total
                    this.pageNoList = data.resultPage.pageNoList
                    this.resultPage = data.resultPage
                } else {

                }
            }).catch(() => {

            })
        },
        formatDate(date) {
            return dayjs(date).format('YYYY/MM/DD') // '25/01/2019'
        },
        getLocationSearch(...params){
            let search = window.location.search
            search = search.substring(1)
            let searchParamsArr = search.split("&")
            let obj ={}
            searchParamsArr.forEach(x=>{
                let key = x.split("=")[0]
                let value = x.split("=")[1]
                if(key && value){
                    obj[key] = value.toString()
                }
            })
            if(params.length>0){
                let parObj = {}
                for (const index in params) {
                    let key = params[index]
                    parObj[key] = obj[key]
                }
                this.obj = parObj
                return
            }
            this.obj = obj
        }
    },
    watch: {
        '$route'(to, from) {
            let name = this.$route.query.searchKey || ""
            this.getLocationSearch('searchKey')
            this.search.name = name || this.obj.searchKey
            this.loadData()
        },
        'obj.searchKey'(to, from) {
            this.search.name = name || this.obj.searchKey
            this.loadData()
        },
        selectTag: {
            deep: true,
            handler(newv, oldv) {
                if (newv) {
                    console.log(newv);
                    this.search = { name: this.search.name }
                    newv.forEach(x => {
                        let key = Object.keys(x)[0]
                        let value = Object.values(x)[0]
                        this.search[key] = value
                    });
                    this.loadData()
                }
            }
        }
    }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
@import url(../assets/css/bootstrap.min.css);
@import url(../assets/fonts/line-icons.css);
@import url(../assets/css/slicknav.css);
@import url(../assets/css/color-switcher.css);
@import url(../assets/css/nivo-lightbox.css);
@import url(../assets/css/animate.css);
@import url(../assets/css/owl.carousel.css);
@import url(../assets/css/main.css);
@import url(../assets/css/responsive.css);

.scrollbar-flex-content {
    display: flex;
}

.scrollbar-demo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* width: 100px; */
    /* height: 50px; */
    margin: 10px;
    text-align: center;
    /* border-radius: 4px; */
    /* background: var(--el-color-danger-light-9); */
    color: var(--el-color-danger);
}

.descsBox {
    text-indent: 2em;
    font-size: 12px;
    font-weight: 500;
    height: 40px;
    color: #5e5c5c;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.activeTag {
    background-color: #00cc67;
    color: #ffffff;
}</style>